<script setup lang="tsx">
import { Table } from '@/components/Table'
import { useTable } from '@/hooks/web/useTable'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { reactive, unref } from 'vue'
import { getListApi } from '@/api/advance'
const emit = defineEmits(['close', 'get-list'])

const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'address',
    label: '时间',
    search: { hidden: true },
    form: { hidden: true },
    detail: { hidden: true }
  },
  {
    field: 'is_on_credit_text',
    label: '类型',
    search: { hidden: true },
    form: { hidden: true },
    detail: { hidden: true }
  },
  {
    field: 'racking_time',
    label: '金额变动明细',
    search: { hidden: true },
    form: { hidden: true },
    detail: { hidden: true }
  },
  {
    field: 'racking_time',
    label: '变动后总金额',
    search: { hidden: true },
    form: { hidden: true },
    detail: { hidden: true }
  }
])
// @ts-ignore
const { allSchemas } = useCrudSchemas(crudSchemas)
const { tableRegister, tableState } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const res = await getListApi({
      page: unref(currentPage),
      limit: unref(pageSize)
    })
    return {
      list: res.data.list,
      total: res.data.count
    }
  }
})
const { loading, dataList, total, currentPage, pageSize } = tableState
</script>

<template>
  <ContentDetailWrap title="消费明细">
    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="allSchemas.tableColumns"
      :data="dataList"
      :loading="loading"
      :pagination="{
        total
      }"
      @register="tableRegister"
    />
    <template #footer>
      <div class="w-full flex items-center justify-center">
        <BaseButton @click="emit('close')">返回</BaseButton>
      </div>
    </template>
  </ContentDetailWrap>
</template>
